/**
 * Created by Administrator on 2017/2/27.
 */
var SideBar = require('../../src/complex/sideBar');
var Tabs = require('../../../src/libs/tabs');
var TabItem = Tabs.TabItem;

var Root = React.createClass({
    getInitialState: function () {
        return{
            sideBarItem:PageDM.sideBar.value,
            faqType: PageDM.faqType.value,
            faq: PageDM.faq.value
        }
    },
    componentDidMount: function(){
        var _this = this;
        UEventHub.on(PageDM.faqType.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                faqType: v
            });
        });
        UEventHub.on(PageDM.faq.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                faq: v
            });
        });
        UEventHub.emit("pageLoad","hello world!");
    },
    tabsCallBack: function(index){
        this.defaultActiveKey = index;
    },
    render: function() {
        var _this = this;
        return (
            <div>
                <div className="mod-account container">
                    <div className="sub-nav">
                        <SideBar sideBarItem={this.state.sideBarItem}/>
                    </div>
                    <div className="account padding">
                        <div className="mod-title title"><b></b>常见问题<b></b></div>
                        <div className="faq-center">
                            <Tabs defaultActiveKey={0} callback={_this.tabsCallBack.bind(_this)}>
                                {
                                    _this.state.faqType.map(function(item,index){
                                        var type = item.QuestionType;
                                        return (
                                            <TabItem tab={item.QuestionTypeName}>
                                                <div className="faq-list">
                                                    <ul>
                                                        {
                                                            _this.state.faq.map(function(it,ii){
                                                                if(it.QuestionType == type){
                                                                    return (
                                                                        <li>
                                                                            <span className="faq-title">
                                                                                <i class="num">{ii}</i>
                                                                                <i class="question">{it.Title}</i>
                                                                            </span>
                                                                            <span className="faq-answer">
                                                                                <p>{it.Description}</p>
                                                                            </span>
                                                                        </li>
                                                                    )
                                                                }else{
                                                                    return (<li></li>);
                                                                }
                                                            })
                                                        }
                                                    </ul>
                                                </div>
                                            </TabItem>
                                        )
                                    })
                                }
                            </Tabs>
                        </div>
                    </div>
                    <div className="clear"></div>
                </div>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('giraffe'));